<template>
    <div class="checkbox-com">
        <div class="topic-item" v-for="(item, index) in props.topicList" :key="index">
            <p>
                <span class="topic-name" v-html="item.topicName"></span>
            </p>
            <div class="option-list">
                <template v-if="props.showAnswer">
                    <div
                        class="show-answer"
                        v-for="(optionItem, optionIndex) in item.optionList"
                        :key="'option-' + optionIndex"
                        :class="{
                            'right-flag': item.rightAnswer.includes(optionItem.optionCode),
                            'error-flag':
                                (item.rightAnswer.includes(optionItem.optionCode) &&
                                    !item.userAnswer.includes(optionItem.optionCode)) ||
                                (!item.rightAnswer.includes(optionItem.optionCode) &&
                                    item.userAnswer.includes(optionItem.optionCode))
                        }">
                        <div class="flex-item">
                            <div class="input-area">
                                <img
                                    src="@/assets/ic_check_blue.png"
                                    alt=""
                                    v-if="
                                        item.rightAnswer.includes(optionItem.optionCode) &&
                                            item.userAnswer.includes(optionItem.optionCode)
                                    " />
                                <img
                                    src="@/assets/ic_check_red.png"
                                    alt=""
                                    v-else-if="item.userAnswer.includes(optionItem.optionCode)" />
                                <div class="input-box" v-else></div>
                            </div>
                            <label>
                                <b>{{ optionItem.optionViewCode }}.</b>
                                {{ optionItem.optionName }}
                            </label>
                        </div>
                        <div>
                            <div v-if="item.rightAnswer.includes(optionItem.optionCode)">
                                <van-icon name="success" />
                            </div>
                            <div
                                v-else-if="
                                    (item.rightAnswer.includes(optionItem.optionCode) &&
                                        !item.userAnswer.includes(optionItem.optionCode)) ||
                                        (!item.rightAnswer.includes(optionItem.optionCode) &&
                                            item.userAnswer.includes(optionItem.optionCode))
                                ">
                                <van-icon name="cross" />
                            </div>
                        </div>
                    </div>
                    <template v-if="item.haveAnalysis || item.haveLocation">
                        <topic-analysis
                            :btn="{position: item.haveLocation, analysis: item.haveAnalysis}"
                            :part-id="partId"
                            :topic-id="item.topicId"
                            :topic-type="topicType"
                            :exam-id="examId"
                            @to-position="(val) => emits('to-position', val)"
                            @popup-show="(val) => emits('popup-show', val)"
                        />
                    </template>
                </template>
                <template v-else>
                    <div
                        class="flex-item"
                        v-for="(optionItem, optionIndex) in item.optionList"
                        :key="'option-' + optionIndex"
                        @click="changeValue(optionItem, item)">
                        <div class="input-area">
                            <img
                                src="@/assets/ic_check_red.png"
                                alt=""
                                v-if="
                                    item.userAnswer != '' &&
                                        item.userAnswer &&
                                        item.userAnswer.indexOf(optionItem.optionCode) != -1
                                " />
                            <div class="input-box" v-else></div>
                            <!--                            <input
                                type="checkbox"
                                :value="optionItem.optionCode"
                                :checked="
                                item.userAnswer != '' &&
                                item.userAnswer &&
                                item.userAnswer.indexOf(optionItem.optionCode) != -1
                            "
                                :id="'checkbox' + optionItem.orderNum"
                            />-->
                        </div>
                        <label :for="'checkbox' + item.orderNum + optionItem.optionCode">
                            <b>{{ optionItem.optionViewCode }}.</b>
                            {{ optionItem.optionName }}
                        </label>
                    </div>
                </template>
            </div>
        </div>
    </div>
</template>
<script setup>
import topicAnalysis from './topicAnalysis.vue'
const props = defineProps(['topicList', 'showAnswer', 'partId', 'topicType', 'examId'])
const emits = defineEmits(['changeHandle', 'to-position', 'popup-show'])

const changeValue = (optionItem, item) => {
    const rightCount = item.rightAnswer ? (item.rightAnswer.match(/@/g) || []).length : 0
    const userCount = item.userAnswer ? (item.userAnswer.match(/@/g) || []).length : 0

    // 处理控制多选框可选总数问题：超过可选答案数量就不可以再选。
    if (rightCount <= userCount && !item.userAnswer.includes(optionItem.optionCode)) {
        return false
    }

    if (item.userAnswer) {
        let arr = item.userAnswer.split('@')
        if (item.userAnswer.indexOf(optionItem.optionCode) !== -1) {
            arr = arr.filter((item) => item !== optionItem.optionCode)
        } else {
            arr.push(optionItem.optionCode)
        }
        const uniqueArr = Array.from(new Set(arr))
        uniqueArr.sort()
        item.userAnswer = uniqueArr.join('@')
    } else {
        item.userAnswer = optionItem.optionCode
    }
    const paramAnswer = {
        topicId: item.topicId,
        userAnswer: item.userAnswer
    }
    emits('changeHandle', paramAnswer)
}
</script>
<style scoped lang="scss">
.radio-com {
    line-height: 30px;
}
.topic-item {
    padding-bottom: 10px;
}
.topic-name {
    ::v-deep img {
        width: 100%;
    }
}
.flex-item {
    display: flex;
    align-items: start;
    justify-content: flex-start;
    line-height: 30px;
    .input-area {
        display: inline-flex;
        align-items: center;
        height: 30px;
        img {
            width: 1.067rem;
            height: 1.067rem;
        }
        input {
            width: 16px;
            height: 16px;
            accent-color: #fd453d;
        }
        .input-box {
            width: 1.067rem;
            height: 1.067rem;
            border: 1px solid #cccccc;
            border-radius: 2px;
        }
    }
    label {
        padding-left: 10px;
    }
}
.show-answer {
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.667rem;
}
.show-answer:last-child {
    margin-bottom: 0;
}

.error-flag {
    background: rgba(253, 69, 61, 0.1);
    color: #fd453d;
    border-radius: 2px;
}
.right-flag {
    background: rgba(5, 144, 255, 0.1);
    color: #0590ff;
    border-radius: 2px;
}
</style>
